<template>
  <div >
    <el-row  class="nav-top">
      <el-col :span="24">
        <div class="grid-content">
          <img class="left" src="http://box.imapic.cn/item/images/newlogo.png"/>
          <div class="left item">
          <span>
              <router-link :to="{ path:'/' }">物件库</router-link>
          </span>
          </div>
          <div class="left item">
            <span>新增模型</span>
          </div>
          <div class="left item">
            <span @click="itemquery">物件筛选</span>
          </div>
          <div class="left item">
            <span v-if="!getAuthenticated" @click="login">登录</span>
            <span v-else  @click="outlogin">退出</span>
          </div>
          <div class="right search">
            <el-input v-model="itemName" placeholder="请输入物件名称" >
              <i @click="search" slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div style="clear: both"></div>
        </div>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <div  class="nav-top-search" v-show="isShearch">
        <el-row>

            <el-form style="margin-left: 200px;margin-top: 20px"  ref="form" :model="form" label-width="80px">
              <el-col :span="6">

                <el-form-item label="物件类型">
                  <el-select clearable v-model="form.TypeId" placeholder="物件类型">

                    <el-option :key="index" v-for="(item ,index) in  this.getCondition.ItemTypeList" :label="item.label" :value="item.value"></el-option>

                  </el-select>
                </el-form-item>

              </el-col>
              <el-col :span="6">
                <el-form-item label="物件颜色">
                  <el-select clearable v-model="form.ColorId" placeholder="物件颜色">
                    <el-option :key="index" v-for="(item ,index) in  this.getCondition.Colors" :label="item.Name" :value="item.Id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-button @click="onclear">清除</el-button>
              <el-button @click="onCondition">确认筛选</el-button>
            </el-form>
        </el-row>
      </div>
    </el-collapse-transition>
    <login ref="login"></login>
  </div>
</template>

<script>
  import { mapGetters,mapMutations } from 'vuex'
  import Login from "../login/login";
    export default {
        name: "nav-top",
      components: {Login},
      data(){
          return {
            itemName:'',
            isShearch:false,
            form:{
              TypeId:'',
              ColorId:''
            }
          }
      },

      computed: {
        ...mapGetters([
          'getItemNameSearch',
          'getCondition',
          'getAuthenticated'
        ])
      },
      methods:{
        ...mapMutations({
          'setAuthenticated':'setAuthenticated'
        }),
          login(){
            this.$refs.login.showLogin((flag)=>{
              if(flag){

              }
            })
          },
          itemquery(){
            this.isShearch = !this.isShearch
          },
          search(){
           this.getItemNameSearch(this.itemName)
          },
          onclear(){
             this.form.TypeId ='';
            this.form.ColorId ='';
          },
          onCondition(){
            this.getItemNameSearch(this.form)
          },
        outlogin(){
          window.localStorage.removeItem('token')
          this.setAuthenticated(null)
        }
      }
    }
</script>

<style lang="scss" >
  @import "../../assets/css/variable";
  .nav-top-search{
    .el-input{
      .el-input__inner{
        border-radius: 20px !important;
      }
    }
  }
    .nav-top{

      .grid-content{
        background: #ffffff;
        .item{
          display: block;
          height: 100%;
          line-height: 90px;
          color: $color-theme;
          padding: 0 20px;
          span {
            a{
              color: $color-theme;
            }
          }
        }
        .search{
          padding-top: 25px;
          .el-input{
            .el-input__inner{
              border-radius: 20px !important;
            }
          }

        }
      }
    }
</style>
